{% extends 'antiques/mobile/base.html' %}

{% block title %}{{ antique.name }} - 古韵堂{% endblock %}

{% block content %}
<div class="container py-4">
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'antiques:list' %}" class="text-decoration-none">返回列表</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ antique.name }}</li>
        </ol>
    </nav>

    <div class="gallery mb-4">
        <div class="main-image text-center mb-3">
            {% with first_image=antique.images.first %}
            {% if first_image %}
            <a href="{{ first_image.image.url }}" data-lightbox="gallery" data-title="{{ antique.name }}">
                <img src="{{ first_image.image.url }}" alt="{{ antique.name }}" class="img-fluid rounded shadow" style="max-height: 300px; margin: 0 auto;">
            </a>
            {% else %}
            <div class="no-image">
                <i class="bi bi-image"></i>
                <p>暂无图片</p>
            </div>
            {% endif %}
            {% endwith %}
        </div>
        <div class="thumbnails row g-2">
            {% for image in antique.images.all %}
            <div class="col-3">
                <a href="{{ image.image.url }}" data-lightbox="gallery" data-title="{{ antique.name }}">
                    <img src="{{ image.thumbnail.url }}" alt="{{ antique.name }}" class="img-fluid rounded">
                </a>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="antique-info">
        <h1 class="h3 mb-3">{{ antique.name }}</h1>
        <div class="mb-3">
            <span class="badge bg-primary me-1">{{ antique.get_dynasty_display }}</span>
            <span class="badge bg-info text-dark me-1">{{ antique.get_process_display }}</span>
            <span class="badge bg-warning text-dark me-1">{{ antique.get_shape_display }}</span>
            <span class="badge bg-secondary me-1">{{ antique.get_kiln_display }}</span>
            <span class="badge bg-danger">{{ antique.get_condition_display }}</span>
        </div>
        {% if antique.size %}
        <p class="mb-3"><i class="bi bi-rulers"></i> {{ antique.size }}</p>
        {% endif %}
        <p class="price mb-4" style="font-family: 'SimSun', 'STSong', serif; font-size: 1.2rem; color: #c00; font-weight: bold;">藏家特惠价：¥{{ antique.price }}</p>
        <div class="description mb-4">
            <h3 class="h5 mb-3">藏品描述</h3>
            <p>{{ antique.description|linebreaks }}</p>
        </div>
        {% if antique.history %}
        <div class="history">
            <h3 class="h5 mb-3">历史背景</h3>
            <p>{{ antique.history|linebreaks }}</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
<style>
    .gallery .main-image {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }
    .gallery .main-image img {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }
    .gallery .main-image:hover img {
        transform: scale(1.05);
    }
    .thumbnails img {
        cursor: pointer;
        transition: opacity 0.3s ease;
    }
    .thumbnails img:hover {
        opacity: 0.8;
    }
    .no-image {
        background: #f8f9fa;
        padding: 2rem;
        text-align: center;
        border-radius: 8px;
    }
    .no-image i {
        font-size: 3rem;
        color: #dee2e6;
    }
    .breadcrumb {
        background: transparent;
        padding: 0.5rem 0;
    }
    .breadcrumb-item + .breadcrumb-item::before {
        content: "›";
        font-size: 1.2em;
    }
</style>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<script>
    lightbox.option({
        'resizeDuration': 200,
        'wrapAround': true,
        'albumLabel': "图片 %1 / %2",
        'fadeDuration': 300,
        'imageFadeDuration': 300,
        'positionFromTop': 50,
        'maxWidth': 1200,
        'maxHeight': 800,
        'disableScrolling': true,
        'alwaysShowNavOnTouchDevices': true,
        'showImageNumberLabel': true,
        'returnFocus': true,
        'closeText': '返回'
    });
</script>
{% endblock %} 